<html>
<head>
    <title>UserManage系统登录页面</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="assets/js/jquery3.3.1.min.js" ></script>
	<script type="text/javascript" src="assets/js/showtip.js"></script>
	<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

	<style>
		body {
			background-repeat: no-repeat;
			background-image: url("assets/imgs/loginBg.jpg");
			background-size: cover;
			width: 100%;
			height: 100vh;
			/*图片居中*/
			margin: 0 auto;
			overflow: auto;
		}
		#tip {
			position: absolute;
			min-width: 200px;
			text-align: center;
			top: 100px;
			left: 53%;
			display: none;
			z-index: 9999;
		}
		#form{
			height:200px;
			width:425px;
			top:45%;
			left:45%;
			position:absolute;
			padding: 1em;
			margin-top:-100px;
			margin-left:-100px;
			border-radius: .3em;
			background: hsla(0,0%,100%,.25) border-box;
			padding: 10px;
			box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
			0 .5em 1em rgba(0, 0, 0, 0.6);
			text-shadow: 0 1px 1px hsla(0,0%,100%,.3);

		}
		#form:before{
			content: '';
			position: absolute;
			top: 0; right: 0; bottom: 0; left: 0;
			margin: -30px;
			z-index: -1;
			-webkit-filter: blur(20px);
			filter: blur(20px);

		}
		h1{
			position:absolute;
			left: 31%;
			top:22%;
			height: 30px;
			transform:translateY(-50%);
		}
	</style>
</head>
  
  <body>

  	<h1 class="col-sm-offset-2">用户登录</h1>
	<strong id="tip"></strong>

	<div id="form">

		<form class="form-horizontal" action="#"/>
			<div style="height: 20px"></div>
			<div class="form-group">
				<label  class=" control-label  col-sm-2">学&nbsp;&nbsp;&nbsp;&nbsp;号</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="sno" placeholder="请输入学号" name="sno">
				</div>
			</div>
			<div class="form-group">
				<label  class="control-label col-sm-2">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="password" placeholder="请输入密码" name="password">
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10" >
					<input type="reset" class="btn btn-primary" value="重置" />
					&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="button" id="login" class="btn btn-success" value="登录" /><br>
					<a href="register.html" class="btn-link" target="_blank">还没有账号？点击注册</a>

				</div>

			</div>
		</form>
	</div>

</body>


<script>
    $(function () {
      	  $("#login").click(function () {
			  if ($('#sno').val() == "") {
			      ShowWarn("用户名不能为空！")
			  } else if ($('#password').val() == "") {
			      ShowWarn("密码不能为空！")
			  } else {
                  $.ajax({
                      'url': "/user/login",
                      'type': "POST",
                      'dataType': "json",
                      // 总之，别加这个contentType,否则使用POST，后台无法收到值
                      // 'contentType': 'application/json;charset=utf-8',
                      'data': {
                          sno: $('#sno').val(),
                          password: $('#password').val(),
                      },
                      success: function (res) {
                          var code = res['code'];
                          if (code == 200) {
                              // 页面跳转
                              window.location.href="/success.html";
                          }
                          var msg = res['msg'];
                          ShowFailure(msg)
                      },
                      error: function () {
                          ShowFailure("登录异常!")
                      }
                  })
			  }

          });

	})
</script>

</html>
